<template>
  <el-dialog v-model="dialogFormVisible" title="创建订单" width="600">
    商品Id:{{ commodityIdList }}
    商品数量:{{ commodityNumberList }}
    选择的优惠卷:{{ chooseCouponIdListStr }}
    商品优惠卷:{{ commodityPaymentList }}<br/>
    原价:{{ totalPayment }}
    优惠卷:{{ totalRealityPayment }}<br/>
    <el-button @click="createOrder">确认创建订单</el-button>
  </el-dialog>
</template>
  
<script lang="ts" setup>
import { createOrderByJwt } from "../../api/order/"
import { ElMessage } from 'element-plus'
import { mainStore } from "../../store/index"
const store = mainStore()

//打开本OrderCreate页
const dialogFormVisible = ref(false)
const openDialog = () => {
  dialogFormVisible.value = true
}
defineExpose({
  openDialog
})

const shoppingCart = toRaw(store.shoppingCart);
const chooseAddressId = store.chooseAddressId
const chooseCouponList = store.chooseCouponList
const commodityIdList = ref('');
const commodityNumberList = ref('');
const chooseCouponIdListStr = ref('')
const commodityPaymentList = ref('')
const totalPayment = store.totalPayment
const totalRealityPayment = ref(0.0)


watch(dialogFormVisible, (newVal, oldVal) => {
  if (dialogFormVisible.value == false) return
  // 校验是否为空购物车
  if (shoppingCart.length == 0) {
    dialogFormVisible.value = false
    return ElMessage({
      showClose: true,
      message: '请选择商品后下单',
      type: 'error',
    })
  }
  // 校验是否选择地址
  if (chooseAddressId == 0) {
    dialogFormVisible.value = false
    return ElMessage({
      showClose: true,
      message: '请选择地址后下单',
      type: 'error',
    })
  }

  // 商品list和数量list转为字符串
  commodityNumberList.value = ''
  commodityPaymentList.value = ''
  for (let i: number = 0; i < shoppingCart.length; i++) {
    if (shoppingCart[i].choose == false) continue
    commodityIdList.value += shoppingCart[i].id
    commodityNumberList.value += shoppingCart[i].number
    if (i != shoppingCart.length - 1) {
      commodityIdList.value += ","
      commodityNumberList.value += ","
    }
  }

  //优惠卷idList转为字符串
  chooseCouponIdListStr.value = ''
  for (let i: number = 0; i < chooseCouponList.length; i++) {
    chooseCouponIdListStr.value += chooseCouponList[i].id
    if (i != chooseCouponList.length - 1) {
      chooseCouponIdListStr.value += ','
    }
  }


  //判断是否选择优惠卷并计算总价 
  totalRealityPayment.value = 0
  if (chooseCouponList.length > 0) {
    for (let i: number = 0; i < chooseCouponList.length; i++) {
      // 免单
      if (chooseCouponList[i].rule == 0) {
        totalRealityPayment.value = 0
        // 折扣
      } else if (chooseCouponList[i].rule == 2) {
        const price = totalPayment.value * chooseCouponList[i].ruleDetail * 0.1
        totalRealityPayment.value = price.toFixed(2)
        // 满减
      } else if (chooseCouponList[i].rule == 3) {
        const price = totalPayment.value - chooseCouponList[i].ruleDetail.split('-')[1]
        totalRealityPayment.value = price.toFixed(2)
      }
    }
  } else {
    totalRealityPayment.value = totalPayment.value
  }


  //计算每件商品折扣价添加到commodityPaymentList
  commodityPaymentList.value = ''
  for (let i: number = 0; i < shoppingCart.length; i++) {
    //判断是否选择优惠卷
    if (chooseCouponList.length > 0) {
      // 免单
      if (chooseCouponList[0].rule == 1) {
        if (i != shoppingCart.length - 1) {
          commodityPaymentList.value += '0' + ','
        } else {
          commodityPaymentList.value += '0'
        }
        // 折扣 满减  根据(单品价*总实付价/总原价)计算
      } else if (chooseCouponList[0].rule == 2 || chooseCouponList[0].rule == 3) {
        const proportion = totalRealityPayment.value / totalPayment.value
        const price = shoppingCart[i].price * proportion
        commodityPaymentList.value += price.toFixed(2)
        if (i != shoppingCart.length - 1) {
          commodityPaymentList.value += ','
        }
      }
    }
  }
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})


const createOrder = () => {
  // 请求创建订单
  const createOrderResult = createOrderByJwt({
    deliverAddressId: chooseAddressId,
    shopId: shoppingCart[0].shopId,
    commodityIdList: commodityIdList.value,
    commodityNumberList: commodityNumberList.value,
    useCouponIdList: chooseCouponIdListStr.value,
    commodityPaymentList: commodityPaymentList.value,
    totalPayment: totalRealityPayment.value
  })
  createOrderResult.then((res) => {
    if (res.code !== 200) {
      return ElMessage({
        showClose: true,
        message: res.message,
        type: 'error',
      })
    }
    // 删除下单过的商品
    for (let i: number = 0; i < shoppingCart.length; i++) {
      if (shoppingCart[i].choose == false) continue
      store.shoppingCart.splice(i, 1)
    }
    return ElMessage({
      showClose: true,
      message: '下单成功',
      type: 'success',
    })
  })
}


</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  